/* Sticky Nav */
body > header{
	position: sticky;
	top: 0;
	z-index: 10;
}

.b_nav-bar
{
	width: 100%;
	position: relative;

	ul{
		list-style: none;
		padding:0;
		margin:0;
	}

	/* All Links */
	li > a {
		color: white;
		font-size: 18px;
		font-family: Instrument Sans;
		font-weight: 600;
		line-height: 20px;
		word-wrap: break-word;
		outline: 0px;

		svg{
			transform-origin: center;
			transition: rotate 0.3s;
		}

		/* Hover/Focus Underline */
		&:not(.cta):is(:hover, :focus-visible){
			text-decoration: underline;
			text-underline-offset: 5px;
			text-decoration-color: var(--color-brand-green, #46b246);

			svg{
				rotate: 180deg;
			}
		}
	}


	/* Top Level Menu */
	ul.level_1{
		display: flex;
		align-items: center;
		gap: 10px;

		/* Top Level Menu Items */
		li.level_1{
			position: relative;

			& > a{
				display: flex;
				align-items: center;
				gap: 10px;
				padding:30px 10px;
			}
		}
	}
	/* Sub Nav Menu */
	ul.level_2{
		/* display: none; */
		display: grid;
		width: max-content;
		z-index: 1;
		padding: 0 30px;
	}
	/* Sub Nav Menu - Mobile */
	@media (width < 1440px){
		ul.level_2{
			display: none;
			width: 100%;
			text-align: center;
			padding-bottom: 30px;
		}
		/* Sub Nav Menu Items */
		li.level_2{
			a{
				display: block;
				padding: 15px 0;
			}
		}
	}
	/* Sub Nav Menu - Desktop */
	@media (width >= 1440px){
		ul.level_2{
			pointer-events: none;
			opacity: 0;
			transition: opacity 0.2s ease;
			position: absolute;
			top: 100%;
			left: 0;
			background: linear-gradient(0deg, rgba(0, 0, 0, 0.90) 41%, rgba(65.92, 65.92, 65.92, 0.90) 100%);
			backdrop-filter: blur(10px);
			max-height: 80dvh;
			overflow-y: auto;
		}
		/* Sub Nav Menu Items */
		li.level_2{
			a{
				display: block;
				padding: 30px 0;
			}
		}
		li.level_2 + li.level_2{
			border-top: 2px solid #C7C7C6;
		}
	}



	/* Top Level CTA */
	.cta{
		gap: 10px;

		@media (width < 1440px){
			margin-top: 30px;
			width: fit-content;
			margin-inline: auto;
		}
	}

	/* Desktop - Show Sub Nav */
	@media (width >= 1440px){
		li.level_1:has(a:is(:hover, :focus)),
		li.level_1:is(:hover, :focus){
			ul.level_2{
				display: grid;
				pointer-events: revert;
				opacity: 1;
			}
			svg{
				rotate:180deg;
			}
		}
	}

	/* Mobile - Show Sub Nav */
	@media (width < 1440px){
		li.expanded{
			ul.level_2{
				display: block;
			}
		}
	}








	/* ---------------------------------------------- Original Styles */

	.mobile-view
	{
		display: flex;
		flex-direction: column;
		width: 100%;
		align-items: center;
		background-image: linear-gradient(rgba(66, 66, 66, 0.8999999761581421) 0%, rgba(0, 0, 0, 0.8999999761581421) 59%);
		height: auto;
		position: relative;
		order: 0;

		.top
		{
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			position: relative;
			flex: 0 0 auto;
			width: 100%;
			order: 0;
		}

		.wrapper
		{
			display: flex;
			padding: 30px 21px;
			justify-content: space-between;
			align-items: center;
			position: relative;
			flex: 0 0 auto;
			width: 100%;
			flex-direction: row;
			order: 0;
		}

		.logo
		{
			height: 44px;
			padding-right: 2px;
			aspect-ratio: 146 / 44;
			position: relative;
			flex: 0 0 146px;
			object-fit: fill;
			order: 0;
		}

		.close-button, .menu-button
		{
			height: 32.226px;
			position: relative;
			flex: 0 0 44px;
			order: 1;
		}

		.icon-close, .icon-menu
		{
			display: flex;
			flex-direction: column;
			width: 44px;
			justify-content: center;
			align-items: center;
			gap: 14px;
			height: auto;
			position: absolute;
			left: 0px;
			top: 0px;
			object-fit: cover;
			order: 0;
		}

		&[data-state="default"]
		{
			.close-button { display: none !important; }
		}
		&[data-state="expanded"]
		{
			.menu-button { display: none !important; }
		}

		.line
		{
			width: 100%;
			position: relative;
			flex: 0 0 0px;
			height: 0px;
			object-fit: cover;
			order: 1;
		}

		.bottom
		{
			display: flex;
			flex-direction: column;
			padding-bottom: 30px;
			align-items: center;
			gap: 30px;
			position: relative;
			flex: 0 0 auto;
			order: 1;
			width: calc(100% - 38px);
			height: calc(100dvh - 104px);
			overflow-y: auto;
		}

		.mobile-links
		{
			width: 100%;
			position: relative;
			flex: 0 0 146px;
			order: 0;
		}

		/* .mobile-link
		{
			display: flex;
			flex-direction: column;
			padding-top: 30px;
			align-items: center;
			gap: 30px;
			width: auto;
			height: auto;
			position: relative;
		} */

		.nav-link
		{
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 8px;
			order: 0;
			padding-block: 30px;
		}

		.text-1
		{
			color: #FFF;
			font-family: "instrument sans";
			font-style: normal;
			font-size: 18px;
			font-weight: 600;
			line-height: 20px /* 111% */;
			position: relative;
			flex: 0 0 auto;
			order: 0;
		}

		.line-2
		{
			width: 100%;
			position: relative;
			flex: 0 0 0px;
			height: 0px;
			object-fit: cover;
			order: 1;
		}

		.nav-link:hover
		{
			.text-1
			{
				text-decoration: underline;
			}
		}

		/* .divider
		{
			width: 340px;
			position: relative;
			flex: 0 0 0px;
			height: 0px;
			object-fit: cover;
			order: 1;
		} */

		.divider
		{
			width:100%;
			height: 2px;
			position: relative;
			order: 1;
			background-color: #818181;
		}

		.mobile-link-2
		{
			display: flex;
			flex-direction: column;
			padding-top: 30px;
			align-items: center;
			gap: 30px;
			width: auto;
			height: auto;
			position: absolute;
			left: 0px;
			top: 73px;
			order: 1;
		}

		.inline-icon-button
		{
			display: flex;
			align-items: center;
			position: relative;
			flex: 0 0 auto;
			flex-direction: row;
			order: 1;
		}

		.content
		{
			display: flex;
			height: 50px;
			padding: 10px 10px 10px 30px;
			justify-content: center;
			align-items: center;
			gap: 2px;
			border-top: 2px solid var(--Colors-Neutrals-Gray, #818181);
			border-bottom: 2px solid var(--Colors-Neutrals-Gray, #818181);
			border-left: 2px solid var(--Colors-Neutrals-Gray, #818181);
			background-color: rgba(255, 255, 255, 0);
			position: relative;
			flex: 0 0 auto;
			flex-direction: row;
			order: 0;
		}

		.example-cta
		{
			color: var(--Neutrals-White, #FFF);
			font-family: "instrument sans";
			font-style: normal;
			font-size: 18px;
			font-weight: 600;
			line-height: 20px /* 111% */;
			position: relative;
			flex: 0 0 auto;
			order: 0;
		}

		badge-icon
		{
			display: flex;
			flex-direction: column;
			height: 30px;
			justify-content: center;
			align-items: center;
			overflow: clip;
			background-color: rgba(255, 255, 255, 0);
			position: relative;
			flex: 0 0 30px;
			order: 1;

			.icon-dollar-smal
			{
				width: 11.354px;
				aspect-ratio: 11 / 20;
				position: relative;
				flex: 0 0 20px;
				object-fit: fill;
				order: 0;
			}
		}

		badge-icon[data-icon="lightbulb"]
		{
			flex-shrink: initial;
		}

		badge-icon[data-icon="team"]
		{
			flex-shrink: initial;
		}

		badge-icon[data-icon="stories"]
		{
			flex-shrink: initial;
		}

		badge-icon[data-icon="arrow right"]
		{
			flex-shrink: initial;
		}

		badge-icon[data-icon="lightbulb"] .icon-dollar-small
		{
			display: none;
		}

		badge-icon[data-icon="team"] .icon-dollar-small
		{
			display: none;
		}

		badge-icon[data-icon="stories"] .icon-dollar-small
		{
			display: none;
		}

		badge-icon[data-icon="arrow right"] .icon-dollar-small
		{
			display: none;
		}

		.endcap
		{
			position: relative;
			flex: 0 0 12px;
			width: 12px;
			height: 50px;
			object-fit: cover;
			order: 1;
		}

		.endcap.hover
		{
			display: none;
		}

		.inline-icon-button:hover
		{
			filter: drop-shadow(0 4px 0 var(--Neutrals-Gray, #818181));

			.content
			{
				background-color: var(--Neutrals-White, #FFF);
				border-top: 2px solid var(--Neutrals-White, #FFF);
				border-bottom: 2px solid var(--Neutrals-White, #FFF);
				border-left: 2px solid var(--Neutrals-White, #FFF);

				.example-cta
				{
					color: var(--Neutrals-Black, #000);
				}
			}

			.endcap
			{
				display: none;
			}

			.endcap.hover
			{
				display: block;
			}
		}

		&[data-state="default"] .close-button
		{
			display: none;
		}

		&[data-state="default"] .bottom
		{
			display: none;
		}

	}

	.desktop-view
	{
		display: none;

		.shared-style-main
		{
			display: flex;
			height: 50px;
			justify-content: flex-end;
			align-items: center;
			gap: 44px;
			position: relative;
			flex: 0 0 auto;
			order: 0;
		}

		.shared-set-badge-icon
		{

			.icon-dollar-small-12
			{
				width: 11.354px;
				position: relative;
				flex: 0 0 20.09px;
				flex-shrink: 0;
				object-fit: contain;
				aspect-ratio: 11 / 20;
				order: 0;
			}

			.icon-bulb-3
			{
				width: 18px;
				position: relative;
				flex: 0 0 20.224px;
				flex-shrink: 0;
				object-fit: fill;
				order: 0;
			}

			.icon-team-3
			{
				width: 26px;
				position: relative;
				flex: 0 0 14.865px;
				flex-shrink: 0;
				object-fit: fill;
				order: 0;
			}

			.icon-stories-3
			{
				display: flex;
				position: relative;
				flex: 0 0 auto;
				object-fit: fill;
				width: auto;
				order: 0;
			}

			.icon-arrow-right-8
			{
				width: 10px;
				position: relative;
				flex: 0 0 17px;
				flex-shrink: 0;
				overflow: clip;
				object-fit: fill;
				order: 0;
			}

			&[data-icon="dollar sign"]
			{
				display: flex;
				flex-direction: column;
				width: 30px;
				height: 30px;
				justify-content: center;
				align-items: center;
				overflow: clip;
				background-color: #FFF;
			}

			&[data-icon="dollar sign"] .icon-bulb-3
			{
				display: none;
			}

			&[data-icon="dollar sign"] .icon-team-3
			{
				display: none;
			}

			&[data-icon="dollar sign"] .icon-stories-3
			{
				display: none;
			}

			&[data-icon="dollar sign"] .icon-arrow-right-8
			{
				display: none;
			}

			&[data-icon="lightbulb"]
			{
				display: flex;
				flex-direction: column;
				width: 30px;
				height: 30px;
				justify-content: center;
				align-items: center;
				overflow: clip;
				background-color: #FFF;
			}

			&[data-icon="lightbulb"] .icon-dollar-small-12
			{
				width: 18px;
				flex: 0 0 20.224px;
				object-fit: fill;
				aspect-ratio: initial;
				content: url("/wp-content/acftb-content/acftb-blocks/Main Site Nav/images/icon-dollar-small-3-lightbulb.svg");
			}

			&[data-icon="lightbulb"] .icon-dollar-small-12
			{
				display: none;
			}

			&[data-icon="lightbulb"] .icon-team-3
			{
				display: none;
			}

			&[data-icon="lightbulb"] .icon-stories-3
			{
				display: none;
			}

			&[data-icon="lightbulb"] .icon-arrow-right-8
			{
				display: none;
			}

			&[data-icon="team"]
			{
				display: flex;
				flex-direction: column;
				width: 30px;
				height: 30px;
				justify-content: center;
				align-items: center;
				overflow: clip;
				background-color: #FFF;
			}

			&[data-icon="team"] .icon-dollar-small-12
			{
				width: 26px;
				flex: 0 0 14.865px;
				object-fit: fill;
				aspect-ratio: initial;
				content: url("/wp-content/acftb-content/acftb-blocks/Main Site Nav/images/icon-dollar-small-3-team.svg");
			}

			&[data-icon="team"] .icon-dollar-small-12
			{
				display: none;
			}

			&[data-icon="team"] .icon-bulb-3
			{
				display: none;
			}

			&[data-icon="team"] .icon-stories-3
			{
				display: none;
			}

			&[data-icon="team"] .icon-arrow-right-8
			{
				display: none;
			}

			&[data-icon="stories"]
			{
				display: flex;
				flex-direction: column;
				width: 30px;
				height: 30px;
				justify-content: center;
				align-items: center;
				overflow: clip;
				background-color: #FFF;
			}

			&[data-icon="stories"] .icon-dollar-small-12
			{
				display: flex;
				flex: 0 0 auto;
				object-fit: fill;
				width: auto;
				flex-shrink: initial;
				aspect-ratio: initial;
				content: url("/wp-content/acftb-content/acftb-blocks/Main Site Nav/images/icon-dollar-small-3-stories.svg");
			}

			&[data-icon="stories"] .icon-dollar-small-12
			{
				display: none;
			}

			&[data-icon="stories"] .icon-bulb-3
			{
				display: none;
			}

			&[data-icon="stories"] .icon-team-3
			{
				display: none;
			}

			&[data-icon="stories"] .icon-arrow-right-8
			{
				display: none;
			}

			&[data-icon="arrow right"]
			{
				display: flex;
				flex-direction: column;
				width: 30px;
				height: 30px;
				justify-content: center;
				align-items: center;
				overflow: clip;
				background-color: #FFF;
			}

			&[data-icon="arrow right"] .icon-dollar-small-12
			{
				width: 10px;
				flex: 0 0 17px;
				overflow: clip;
				object-fit: fill;
				aspect-ratio: initial;
				content: url("/wp-content/acftb-content/acftb-blocks/Main Site Nav/images/icon-dollar-small-3-arrow right.svg");
			}

			&[data-icon="arrow right"] .icon-dollar-small-12
			{
				display: none;
			}

			&[data-icon="arrow right"] .icon-bulb-3
			{
				display: none;
			}

			&[data-icon="arrow right"] .icon-team-3
			{
				display: none;
			}

			&[data-icon="arrow right"] .icon-stories-3
			{
				display: none;
			}
		}

		.shared-set-inline-icon
		{
			display: flex;
			align-items: center;

			.content-4
			{
				display: flex;
				height: 50px;
				padding: 10px 10px 10px 30px;
				justify-content: center;
				align-items: center;
				gap: 2px;
				position: relative;
				flex: 0 0 auto;
				border-top: 2px solid #818181;
				border-bottom: 2px solid #818181;
				border-left: 2px solid #818181;
				order: 0;
			}

			span.example-cta-4
			{
				color: #FFF;
				font-family: "Instrument Sans";
				font-style: normal;
				font-size: 18px;
				font-weight: 600;
				line-height: 20px /* 111% */;
				order: 0;
			}

			.badge-icon-4
			{
				position: relative;
				flex: 0 0 30px;
				flex-shrink: 0;
				order: 1;
				background-color: initial;
			}

			.endcap-5
			{
				height: 100%;
				position: relative;
				flex: 0 0 12px;
				flex-shrink: 0;
				object-fit: fill;
				order: 1;
				width: 100%;
			}

			&:hover
			{
				filter: drop-shadow(0 4px 0 rgba(129, 129, 129, 1));
			}

			&:hover .content-4
			{
				background-color: #FFF;
				border-top: 2px solid #FFF;
				border-bottom: 2px solid #FFF;
				border-left: 2px solid #FFF;
			}

			&:hover .example-cta-4
			{
				color: #000;
			}

			&:hover .endcap-5
			{
				content: url("/wp-content/acftb-content/acftb-blocks/Main Site Nav/images/endcap-2-hover.svg");
			}
		}

		.shared-set-nav
		{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			gap: 4px;

			span.text-15
			{
				color: #FFF;
				font-family: "Instrument Sans";
				font-style: normal;
				font-size: 18px;
				font-weight: 600;
				line-height: 20px /* 111% */;
				order: 0;
			}

			&:hover .text-15
			{
				align-self: stretch;
			}

			&:hover .line-15
			{
				width: 100%;
				height: 1px;
				background-color: #FFF;
				order: 1;
			}
		}

		.shared-set-nav-section-icon
		{
			display: flex;
			align-items: center;
			gap: 6px;

			.top-4
			{
				display: flex;
				align-items: center;
				gap: 6px;
				position: relative;
				flex: 0 0 auto;
				order: 0;
			}

			.nav-link-2
			{
				height: 13px;
				position: relative;
				flex: 0 0 auto;
				order: 0;
			}

			.icon-arrow-right-4
			{
				transform: rotate(90deg);
				height: 17px;
				position: relative;
				flex: 0 0 17px;
				overflow: clip;
				object-fit: fill;
				order: 1;
			}

			&:hover
			{
				flex-direction: column;
				align-items: flex-start;
				gap: 50px;
			}

			&:hover .icon-arrow-right-4
			{
				transform: rotate(-90deg);
			}

			&:hover .nav-sub-menu-2
			{
				display: flex;
				flex-direction: column;
				padding: 30px;
				align-items: flex-start;
				gap: 30px;
				position: relative;
				flex: 0 0 auto;
				background-image: linear-gradient(rgba(0, 0, 0, 0.8999999761581421) 41%, rgba(66, 66, 66, 0.8999999761581421) 100%);
				backdrop-filter: blur(20px);
				order: 1;
			}

			&:hover .divider-3
			{
				width: 100%;
				height: 2px;
				background-color: #818181;
				order: 1;
			}

			&:hover .divider-3
			{
				width: 100%;
				height: 2px;
				background-color: #818181;
				order: 3;
			}

			&:hover .nav-link-4
			{
				color: #FFF;
				font-family: "Instrument Sans";
				font-style: normal;
				font-size: 18px;
				font-weight: 600;
				line-height: 20px /* 111% */;
				order: 4;
			}
		}

		.shared-comp-icon-dollar-small
		{
			object-fit: contain;
			aspect-ratio: 11 / 20;
		}

		.shared-comp-icon-arrow-right
		{
			overflow: clip;
			object-fit: fill;
		}

		.shared-comp-all-things-metal-log
		{
			overflow: clip;
			object-fit: fill;
		}

		.wrapper
		{
			display: flex;
			padding: 23px 59px;
			justify-content: space-between;
			align-items: center;
			position: relative;
			flex: 0 0 114px;
			width: 100%;
			background-image: linear-gradient(rgba(66, 66, 66, 0.8999999761581421) 0%, rgba(0, 0, 0, 0.8999999761581421) 76%);
			/* backdrop-filter: blur(20px); */
			order: 0;
		}

		.logo
		{
			height: 68px;
			position: relative;
			flex: 0 0 226px;
			order: 0;
		}

		.main
		{
			order: 1;
		}

		.nav-links
		{
			height: 13px;
			align-items: flex-start;
		}

		.nav-2
		{
			position: relative;
			flex: 0 0 auto;
			order: 1;
		}

		.nav-3
		{
			position: relative;
			flex: 0 0 auto;
			order: 2;
		}

		.nav-4
		{
			position: relative;
			flex: 0 0 auto;
			order: 3;
		}

		.nav-5
		{
			position: relative;
			flex: 0 0 auto;
			order: 4;
		}

		.nav-6
		{
			position: relative;
			flex: 0 0 auto;
			order: 5;
		}

		.inline-icon
		{
			position: relative;
			flex: 0 0 auto;
			order: 1;
		}

		.line-7
		{
			width: 100%;
			height: 2px;
			background-color: #818181;
			order: 1;
		}
	}

	@media (min-width: 1440px)
	{
		.mobile-view { display: none; }
		.desktop-view
		{
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			width: 100%;
		}
	}

	.shared-set-cta
	{
		display: flex;
		padding: 10px 22px 10px 32px;
		justify-content: center;
		align-items: center;
		border-image-source: url("/wp-content/acftb-content/acftb-blocks/Main Site Nav/images/shape-bg-slice-5-20-20-5-default.svg");
		border-image-slice: 5 20 20 5 fill;
		border-image-width: 5px 20px 20px 5px;
		border-image-repeat: stretch;

		span.title
		{
			color: #FFF;
			font-family: "Instrument Sans";
			font-style: normal;
			font-size: 18px;
			font-weight: 600;
			line-height: 20px /* 111% */;
			order: 0;
		}

		.icon-wrapper
		{
			display: flex;
			flex-direction: column;
			height: 30px;
			justify-content: center;
			align-items: center;
			position: relative;
			flex: 0 0 30px;
			flex-shrink: 0;
			overflow: clip;
			order: 1;
		}

		.arrow-right
		{
			width: 10px;
			position: relative;
			flex: 0 0 17px;
			flex-shrink: 0;
			overflow: clip;
			object-fit: fill;
			order: 0;
		}

		&:hover
		{
			border-image-source: url("/wp-content/acftb-content/acftb-blocks/Main Site Nav/images/shape-bg-slice-5-20-20-5-hover.svg");
			filter: drop-shadow(0 4px 0 rgba(129, 129, 129, 1));
		}

		&:hover .title
		{
			color: #000;
		}

		.shared-comp-icon-arrow-right
		{
			overflow: clip;
			object-fit: fill;
		}

		.cta
		{
			position: absolute;
			left: 34px;
			top: 45px;
			order: 0;
		}
	}
}